import React, { useEffect } from 'react'
import { Button, Table, Tag, Pagination } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import styles from './index.module.scss'
import { useAppDispatch, useAppSelector } from '@/store'
import { set_current_exam_topic_id, set_exam_list_data } from '@/store/slice/subject'
import { get_exam_list_async } from '@/store/slice/subject/request'
import { select_exam_list_data, select_subject_loading } from '@/store/slice/subject/select'
import dayjs from 'dayjs'
import Search from './search'
import type { PaginationProps } from 'antd'
import { useNavigate } from 'react-router-dom'

interface DataType {
  key: string
  subject_name: string
  user_name: number
  created: string
  judge: boolean
  // tags: string[]
}

// 初始PAGE_SIZE的设置
let PAGE_SIZE = 6
// 总条数的显示
const showTotal: PaginationProps['showTotal'] = total => `总共有 ${total} 张试卷`
// 每页展示多少条数据
const pageSizeOptions = [6, 8, 10]

// 阅卷列表
export default function CorretExamList() {
  const navigate = useNavigate()
  const dispatch = useAppDispatch()

  // 获取当前的试卷列表
  const exam_list_data = useAppSelector(select_exam_list_data)
  const loading = useAppSelector(select_subject_loading)

  // 进入页面获取试卷列表
  useEffect(() => {
    dispatch(
      get_exam_list_async({
        ...exam_list_data.search_params,
        pageSize: PAGE_SIZE,
        pageNo: exam_list_data.current_page
      })
    )
  }, [PAGE_SIZE, exam_list_data.current_page])

  // 表格的每一列的数据
  const columns: ColumnsType<DataType> = [
    {
      title: '试卷名称',
      dataIndex: 'subject_name',
      key: 'subject_name'
    },
    {
      title: '学生姓名',
      dataIndex: 'user_name',
      key: 'user_name'
    },
    {
      title: '考试时间',
      dataIndex: 'created',
      key: 'created',
      render: text => {
        return <span>{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>
      }
    },
    {
      title: '分数',
      key: 'score',
      dataIndex: 'score',
      render: text => {
        // 只有已经阅卷的才有分数
        return <>{text ? <Tag color="cyan">{text}</Tag> : <Tag color="default"></Tag>}</>
      }
    },
    {
      title: '是否阅卷',
      key: 'judge',
      dataIndex: 'judge',
      render: text => {
        // 根据judge来判断是否阅卷
        return <>{text ? <Tag color="success">已阅卷</Tag> : <Tag color="default">未阅卷</Tag>}</>
      }
    },
    {
      title: '操作',
      key: '_id',
      dataIndex: '_id',
      render: (text, record) => (
        <>
          {record.judge ? (
            <Button type="primary" onClick={() => goReadExam(record)}>
              查看
            </Button>
          ) : (
            <Button danger type="primary" onClick={() => goCorretExam(record)}>
              阅卷
            </Button>
          )}
        </>
      )
    }
  ]

  // 处理过后的表格数据(加了key)
  const exam = exam_list_data.list?.map((item: any) => {
    return {
      ...item,
      key: item._id
    }
  })

  // 前往查看试卷
  function goReadExam(item: any) {
    navigate(`/read_exam/${item._id}`)
  }

  // 前往阅卷
  function goCorretExam(record: any) {
    // 采用此方式刷新后就会导致数据消失
    // dispatch(set_current_exam_topic_id(record._id))
    // 通过 路由传过去可以防止刷新数据消失
    navigate(`/corret_exam/${record._id}`)
  }

  // 页面数改变
  const changPage: PaginationProps['onChange'] = (pageNumber, updateSize) => {
    PAGE_SIZE = updateSize
    // 修改仓库的页码
    dispatch(
      set_exam_list_data({
        current_page: pageNumber,
        ...exam_list_data.search_params
      })
    )

    // 根据跳跃页面数和搜索参数请求后端数据  因为搜索页的发送的请求只能停留当前页面,切换页面就会失效
    dispatch(
      get_exam_list_async({
        ...exam_list_data.search_params,
        pageNo: pageNumber,
        pageSize: updateSize
      })
    )
  }

  return (
    <div>
      <div className={styles.search}>
        <Search></Search>
      </div>
      <div className={styles.table}>
        <Table loading={loading} columns={columns} dataSource={exam} pagination={false} />
        <Pagination pageSize={PAGE_SIZE} current={exam_list_data.current_page} total={exam_list_data.count} pageSizeOptions={pageSizeOptions} onChange={changPage} style={{ marginTop: 20 }} showTotal={showTotal} showSizeChanger />
      </div>
    </div>
  )
}
